<template>
  <div id="mine-invite">
    <header>
      <div
        v-for="(item, index) in header"
        :key="index"
        v-text="item"></div>
    </header>

    <ul>
      <li v-for="(item, index) in invitedList">
        <span v-text="item.user_nicename ? item.user_nicename : '未设置'"></span>
        <span>{{ item.mobile }}</span>
        <span>{{ item.create_time }}</span>
        <span v-if="item.user_status === '0'">审核不通过</span>
        <span v-else-if="item.user_status === '1'">通过</span>
        <span v-else>未审核</span>
      </li>
    </ul>

    <router-link
      :to="codeLink"
      tag="button"
      class="public-single-btn">我的邀请二维码</router-link>
  </div>
</template>

<script>
  export default {
    name: "mine-invite",
    data() {
      return {
        header: [
          '姓名',
          '联系方式',
          '注册时间',
          '状态'
        ],

        /**
         * 根据后台返回数据格式：item => {
         *                      user_nicename: xxx // 姓名
         *                      mobile: xxx // 联系方式
         *                      create_time: xxx // 注册时间
         *                      user_status: xxx // 状态
         * }
         */

        invitedList: [],

        codeLink: '/mine/mine-code'
      }
    },
    created() {
      this.$http.post({
        api: this.$api.USER_INVITED_LIST,
        params: {
          user_id: localStorage.getItem('id')
        },
        success: function (res) {

          // 绑定数据

          this.invitedList = res.data.data;
        }.bind(this)
      })
    }
  }
</script>

<style scoped lang="scss">

  #mine-invite {

    $this-item-one-width: 16.665%;
    $this-item-two-width: 33.335%;
    $this-item-three-width: 33.335%;
    $this-item-four-width: 16.665%;

    padding: 8.6rem 0 7.8rem;

    >header {
      position: fixed;
      top: 0;
      right: 0;
      width: $size-as-parent;
      height: 7.6rem;
      line-height: 7.6rem;
      margin-bottom: 1rem;
      box-shadow: $public-box-shadow-bolder;
      background: $white;

      >div {
        display: inline-block;
        text-align: center;
        font-size: 1.5rem;
        color: #333;

        &:nth-of-type(1) {
          width: $this-item-one-width;
        }
        &:nth-of-type(2) {
          width: $this-item-two-width;
        }
        &:nth-of-type(3) {
          width: $this-item-three-width;
        }
        &:nth-of-type(4) {
          width: $this-item-four-width;
        }
      }
    }

    >ul {
      background: $white;

      >li {
        display: flex;
        align-items: center;
        min-height: 5rem;
        padding: .6rem 0;
        border-bottom: 1px solid #eee;

        &:last-of-type {
          border-bottom: 1px solid #ccc;
        }

        >span {
          display: block;
          text-align: center;
          font-size: 1.2rem;
          color: #333;

          &:nth-of-type(1) {
            width: $this-item-one-width;
            text-align: left;
            padding-left: .6rem;
          }
          &:nth-of-type(2) {
            width: $this-item-two-width;
          }
          &:nth-of-type(3) {
            width: $this-item-three-width;
          }
          &:nth-of-type(4) {
            width: $this-item-four-width;
          }
        }
      }
    }

    >button {
      position: fixed;
      right: 4%;
      bottom: 2rem;
    }
  }
</style>
